// components/regionPicker/regionPicker.js
import {
  getRegion
} from '../../utils/api/index.js'
import {
  baseImg
} from './util.js'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    themeColor: {
      type: String,
      value: '#196eff'
    },
    showPicker: {
      type: Boolean,
      value: false
    },
    region: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTab: [{
      selectIndex: -1,
      label: '请选择',
    }],
    currentIndex: 0,
    selectArrObj: {
      one: [],
      two: [],
      three: [],
      four: []
    },
    imgBase: baseImg,
    showMask: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toChooseLineOne(e) {
      const index = e.currentTarget.dataset.index
      const currentTab = this.data.currentTab
      const selectArrObj = this.data.selectArrObj
      const chooseItem = selectArrObj.one[index]
      // 导航栏
      currentTab[0].label = chooseItem.districtName
      currentTab[0].selectIndex = index
      currentTab[0].districtId = chooseItem.districtId
      // 处理下一级
      getRegion({
        districtName: chooseItem.districtName,
        districtLevel: 'PROVINCE'
      }).then(res => {
        console.log(res, 'res')
        if (res.resultStatus) {
          // 清空三级
          if (currentTab.length == 3) {
            currentTab.splice(2, 1)
            this.setData({
              'selectArrObj.three': []
            })
          }
          if (currentTab.length == 2) {
            currentTab[1].label = '请选择'
            currentTab[1].selectIndex = -1
          } else if (currentTab.length == 1) {
            currentTab.push({
              selectIndex: -1,
              label: '请选择',
            })
          }

          this.setData({
            'selectArrObj.two': res.resultData,
            currentTab,
            currentIndex: 1
          })

        }
      })
    },
    // 第二列选择
    toChooseLineTwo(e) {
      const index = e.currentTarget.dataset.index
      const currentTab = this.data.currentTab
      const selectArrObj = this.data.selectArrObj
      const chooseItem = selectArrObj.two[index]
      // 导航栏
      currentTab[1].label = chooseItem.districtName
      currentTab[1].selectIndex = index
      currentTab[1].districtId = chooseItem.districtId
      // 处理下一级
      getRegion({
        districtName: chooseItem.districtName,
        districtLevel: 'CITY'
      }).then(res => {
        console.log(res, 'res')
        if (res.resultStatus) {
          if (currentTab.length == 3) {
            currentTab[2].label = '请选择'
            currentTab[2].selectIndex = -1
          } else if (currentTab.length == 2) {
            currentTab.push({
              selectIndex: -1,
              label: '请选择',
            })
          }
          this.setData({
            'selectArrObj.three': res.resultData,
            currentTab,
            currentIndex: 2
          })
        }
      })
    },
    // 第三列选择
    toChooseLineThree(e) {
      const index = e.currentTarget.dataset.index
      const currentTab = this.data.currentTab
      const selectArrObj = this.data.selectArrObj
      const chooseItem = selectArrObj.three[index]
      // 导航栏
      currentTab[2].label = chooseItem.districtName
      currentTab[2].selectIndex = index
      currentTab[2].districtId = chooseItem.districtId
      this.setData({
        currentTab
      })
      this.triggerEvent('choosed', currentTab)
      this.closeMask()
    },
    // 切换tab
    changeTab(e) {
      const index = e.currentTarget.dataset.index
      this.setData({
        currentIndex: index
      })
    },
    closeMask() {
      this.triggerEvent('closePicker')
    },
    handleRegion() {
      const region = this.data.region
      const selectArrObj = this.data.selectArrObj
      const currentTab = this.data.currentTab
      // 查第一级
      const index = selectArrObj.one.findIndex(item => item.districtName == region[0])
      currentTab[0].selectIndex = index
      currentTab[0].label = region[0]
      this.data.currentTab = currentTab
      this.setData({
        showMask: false,
        currentIndex: 2
      })
      this.dealOne(region).then(res => {
        this.dealTwo(region)
      })
    },
    dealOne(region) {
      return new Promise((resolve, reject) => {
        const currentTab = this.data.currentTab
        getRegion({
          districtName: region[0],
          districtLevel: 'PROVINCE'
        }).then(res => {
          if (res.resultStatus) {
            const result = res.resultData
            const index = result.findIndex(item => item.districtName == region[1])
            currentTab.push({
              selectIndex: index,
              label: region[1]
            })
            this.setData({
              'selectArrObj.two': res.resultData,
            })
            this.data.currentTab = currentTab
            resolve('ok')
          }
        })
      })
    },
    dealTwo(region) {
      const currentTab = this.data.currentTab
      getRegion({
        districtName: region[1],
        districtLevel: 'CITY'
      }).then(res => {
        if (res.resultStatus) {
          const result = res.resultData
          const index = result.findIndex(item => item.districtName == region[2])
          currentTab.push({
            selectIndex: index,
            label: region[2]
          })
          this.setData({
            'selectArrObj.three': res.resultData,
            currentTab,
            showMask: true
          })
        }
      })
    }
  },
  attached() {
    getRegion({
      districtName: '',
      districtLevel: ''
    }).then(res => {
      if (res.resultStatus) {
        this.setData({
          'selectArrObj.one': res.resultData
        })
        if (this.data.region.length > 0) {
          this.handleRegion()
        }
      }
    })
  }
})